|技术资源门户第一站|
入住:用户 密码


首  页 | 新闻动态 | 网页设计 | 图形图像 | 网络编程 | 电脑技术 | 资源下载 | 专题集锦 | 酷站展示 | 图库素材 | 原创投稿
论  坛 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定 | 栏目待定
热 门 文 章
·(下)用Photoshop“组装”一只标
·微软宣布SQLServer2005功能及售价
·HTML简明手册 — 第十一章 脚本语
·四川风讯科技发展有限公司首届模
·完美之作:茶·咖啡·果汁
·HTML简明手册 — 第九章 样式
·腾讯宣布收购Foxmail
·下拉菜单全攻略之Dreamweaver篇
·ASP初学者常犯的几个错误
·Dreamweaver MX 2004 入门教程之
推 荐文 章
·【PS特训营】(1)《快速纹理》
·最新的技术-XSS(五)
·最新的技术-XSS(四)
·最新的技术-XSS(三)
·最新的技术-XSS(二)
·最新的技术-XSS(一)
·多媒体标记Shvatz 前景
·进入SMIL
·SMIL:多媒体标记
·XML未来的设计:未来的结构
栏目精华
相 关 文 章
  最新更新:  
 
全能搜索:
  开始时间  结束时间 
 
 您现在的位置:首页>网页设计>Html>新闻
HTML教学---网页制作基础篇
日期:2005-3-7 12:29:41     来源:   编辑: 
图形标记
■ 本节主要介绍的标记:



<IMG>
欲明白本篇【HTML剖析】之标记分类请看 【标记一览】。
亦请先明白围堵标记与空标记的分别请看 【HTML概念】。

■ <IMG> :

<IMG> 称图形标记,主要用以插入图片於网页中,至於其它用处如配合影片档案等的播 放及影像地图(Image Map 或称一图多连结)则於不会在这节提及,请看【影像地图】及 【其他标记】。
<IMG> 的一般参数设定:

例如 <img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">

src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,前两者通行己久,後者由 96 年开始发展, 於未来取代前两者。若图片档与该 html 档同处一目录则只需写上档案名称,否则 必须加上正确的途径,相对及绝对皆可。两者的分别请看 Composer 教室之【连结 进阶】。
width=100 height=100
设定图片大小,此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实 大小以免失真,若需要改变图片大小最好事先使用图像编辑工具。
hspace=5 vspace=5
设定图片边沿空白,以免文字或其它图片过於贴近。hspace 是设定图片左右的空 间,vspace 则是设定图片上下的空间,高度采用 pixels 作单位。
border=2
图片边框厚度。
align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底端、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支援 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部意指它考虑到比方 y 、g、q 等字的下缘)。
alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若用者使用文字浏览器,由於不支援图片,这些文 字更会代替图片而被显示。若於支援图片显示的浏览器,当鼠标移至图片上该些 文字亦会显示。
lowsrc="pre_logo.gif"
设定先显示低解像图片,若所加入的是一张很大的图片,下载需时很长,这张低 解像图片会先被显示以免浏览失却兴趣,通当是原图片灰阶版本。
例子一:

原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入  
显示结果  普通插入  

例子二:

原始码 <img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  
显示结果  设定上下左右空白位置  

例子叁:

原始码 <img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置  
显示结果  设定字画中间对齐,边框厚度为 4。  

例子四:

原始码 <img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片*右。  
显示结果  设定图片*右。  

例子五:

原始码 <img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片  
显示结果  放大了的图片


本新闻共15页,当前在第7页  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  


特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
责任编辑: 原始作者:
信息来源: 录入时间:2005-3-7 12:29:41
浏览次数: 投稿信箱: Wooxun#126.com

  → 发表我的评论      → 查看评论(点击查看)
版权所有 2005-2006©www.woxun.com  维护QQ:8216238
设计版本:网讯中国 2005 VOL.1 程序核心:风讯2.0